<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

	<title>Callie HTML Template</title>

	<!-- Google font -->
	<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700%7CMuli:400,700" rel="stylesheet">

	<!-- Bootstrap -->
	<link type="text/css" rel="stylesheet" href="/statics/front/css/bootstrap.min.css" />

	<!-- Font Awesome Icon -->
	<link rel="stylesheet" href="/statics/front/css/font-awesome.min.css">

	<!-- Custom stlylesheet -->
	<link type="text/css" rel="stylesheet" href="/statics/front/css/style.css" />

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
		  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
		  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->

</head>

<body>
	<!-- HEADER -->
	<header id="header">
		<!-- NAV -->
		<div id="nav">
			<!-- Top Nav -->
			<div id="nav-top">
				<div class="container">
					<!-- social -->
					<ul class="nav-social">
						<li><a href="#"><i class="fa fa-facebook"></i></a></li>
						<li><a href="#"><i class="fa fa-twitter"></i></a></li>
						<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
						<li><a href="#"><i class="fa fa-instagram"></i></a></li>
					</ul>
					<!-- /social -->

					<!-- logo -->
					<div class="nav-logo">
						<a href="/front" class="logo"><img src="/statics/front/img/logo.png" alt=""></a>
					</div>
					<!-- /logo -->

					<!-- search & aside toggle -->
					<div class="nav-btns">
						<button class="aside-btn"><i class="fa fa-bars"></i></button>
						<button class="search-btn"><i class="fa fa-search"></i></button>
						<div id="nav-search">
							<form>
								<input class="input" name="search" placeholder="Enter your search...">
							</form>
							<button class="nav-close search-close">
								<span></span>
							</button>
						</div>
					</div>
					<!-- /search & aside toggle -->
				</div>
			</div>
			<!-- /Top Nav -->

			<!-- Main Nav -->
			<div id="nav-bottom">
				<div class="container">
					<!-- nav -->
					<ul class="nav-menu">
						<li class="has-dropdown">
							<a href="/front">Home</a>
							<div class="dropdown">
								<div class="dropdown-body">
									<ul class="dropdown-list">
										<li><a href="/front/category">Category page</a></li>
										<li><a href="/front/blogpost">Post page</a></li>
										<li><a href="/front/author">Author page</a></li>
										<li><a href="/front/aboutus">About Us</a></li>
										<li><a href="/front/contacts">Contacts</a></li>
										<li><a href="/front/blank">Regular</a></li>
									</ul>
								</div>
							</div>
						</li>
						<li class="has-dropdown megamenu">
							<a href="#">Lifestyle</a>
							<div class="dropdown tab-dropdown">
								<div class="row">
									<div class="col-md-2">
										<ul class="tab-nav">
											<li class="active"><a data-toggle="tab" href="#tab1">Lifestyle</a></li>
											<li><a data-toggle="tab" href="#tab2">Fashion</a></li>
											<li><a data-toggle="tab" href="#tab1">Health</a></li>
											<li><a data-toggle="tab" href="#tab2">Travel</a></li>
										</ul>
									</div>
									<div class="col-md-10">
										<div class="dropdown-body tab-content">
											<!-- tab1 -->
											<div id="tab1" class="tab-pane fade in active">
												<div class="row">
													<!-- post -->
													<div class="col-md-4">
														<div class="post post-sm">
															<a class="post-img" href="/front/blogpost"><img src="/statics/front/img/post-10.jpg" alt=""></a>
															<div class="post-body">
																<div class="post-category">
																	<a href="/front/category">Travel</a>
																</div>
																<h3 class="post-title title-sm"><a href="/front/blogpost">Sed ut perspiciatis, unde omnis iste natus error sit</a></h3>
																<ul class="post-meta">
																	<li><a href="/front/author">John Doe</a></li>
																	<li>20 April 2018</li>
																</ul>
															</div>
														</div>
													</div>
													<!-- /post -->

													<!-- post -->
													<div class="col-md-4">
														<div class="post post-sm">
															<a class="post-img" href="/front/blogpost"><img src="/statics/front/img/post-13.jpg" alt=""></a>
															<div class="post-body">
																<div class="post-category">
																	<a href="/front/category">Travel</a>
																	<a href="/front/category">Lifestyle</a>
																</div>
																<h3 class="post-title title-sm"><a href="/front/blogpost">Mel ut impetus suscipit tincidunt. Cum id ullum laboramus persequeris.</a></h3>
																<ul class="post-meta">
																	<li><a href="/front/author">John Doe</a></li>
																	<li>20 April 2018</li>
																</ul>
															</div>
														</div>
													</div>
													<!-- /post -->

													<!-- post -->
													<div class="col-md-4">
														<div class="post post-sm">
															<a class="post-img" href="/front/blogpost"><img src="/statics/front/img/post-12.jpg" alt=""></a>
															<div class="post-body">
																<div class="post-category">
																	<a href="/front/category">Lifestyle</a>
																</div>
																<h3 class="post-title title-sm"><a href="/front/blogpost">Mel ut impetus suscipit tincidunt. Cum id ullum laboramus persequeris.</a></h3>
																<ul class="post-meta">
																	<li><a href="/front/author">John Doe</a></li>
																	<li>20 April 2018</li>
																</ul>
															</div>
														</div>
													</div>
													<!-- /post -->
												</div>
											</div>
											<!-- /tab1 -->

											<!-- tab2 -->
											<div id="tab2" class="tab-pane fade in">
												<div class="row">
													<!-- post -->
													<div class="col-md-4">
														<div class="post post-sm">
															<a class="post-img" href="/front/blogpost"><img src="/statics/front/img/post-5.jpg" alt=""></a>
															<div class="post-body">
																<div class="post-category">
																	<a href="/front/category">Lifestyle</a>
																</div>
																<h3 class="post-title title-sm"><a href="/front/blogpost">Postea senserit id eos, vivendo periculis ei qui</a></h3>
																<ul class="post-meta">
																	<li><a href="/front/author">John Doe</a></li>
																	<li>20 April 2018</li>
																</ul>
															</div>
														</div>
													</div>
													<!-- /post -->

													<!-- post -->
													<div class="col-md-4">
														<div class="post post-sm">
															<a class="post-img" href="/front/blogpost"><img src="/statics/front/img/post-8.jpg" alt=""></a>
															<div class="post-body">
																<div class="post-category">
																	<a href="/front/category">Fashion</a>
																	<a href="/front/category">Lifestyle</a>
																</div>
																<h3 class="post-title title-sm"><a href="/front/blogpost">Sed ut perspiciatis, unde omnis iste natus error sit</a></h3>
																<ul class="post-meta">
																	<li><a href="/front/author">John Doe</a></li>
																	<li>20 April 2018</li>
																</ul>
															</div>
														</div>
													</div>
													<!-- /post -->

													<!-- post -->
													<div class="col-md-4">
														<div class="post post-sm">
															<a class="post-img" href="/front/blogpost"><img src="/statics/front/img/post-9.jpg" alt=""></a>
															<div class="post-body">
																<div class="post-category">
																	<a href="/front/category">Lifestyle</a>
																</div>
																<h3 class="post-title title-sm"><a href="/front/blogpost">Mel ut impetus suscipit tincidunt. Cum id ullum laboramus persequeris.</a></h3>
																<ul class="post-meta">
																	<li><a href="/front/author">John Doe</a></li>
																	<li>20 April 2018</li>
																</ul>
															</div>
														</div>
													</div>
													<!-- /post -->
												</div>
											</div>
											<!-- /tab2 -->

											<!-- /tab3 tab4 .. -->
										</div>
									</div>
								</div>
							</div>
						</li>
						<li class="has-dropdown megamenu">
							<a href="#">Fashion</a>
							<div class="dropdown">
								<div class="dropdown-body">
									<div class="row">
										<div class="col-md-3">
											<h4 class="dropdown-heading">Categories</h4>
											<ul class="dropdown-list">
												<li><a href="#">Lifestyle</a></li>
												<li><a href="#">Fashion</a></li>
												<li><a href="#">Technology</a></li>
												<li><a href="#">Health</a></li>
												<li><a href="#">Travel</a></li>
											</ul>
										</div>
										<div class="col-md-3">
											<h4 class="dropdown-heading">Lifestyle</h4>
											<ul class="dropdown-list">
												<li><a href="#">Lifestyle</a></li>
												<li><a href="#">Fashion</a></li>
												<li><a href="#">Health</a></li>
											</ul>
											<h4 class="dropdown-heading">Technology</h4>
											<ul class="dropdown-list">
												<li><a href="#">Lifestyle</a></li>
												<li><a href="#">Travel</a></li>
											</ul>
										</div>
										<div class="col-md-3">
											<h4 class="dropdown-heading">Fashion</h4>
											<ul class="dropdown-list">
												<li><a href="#">Fashion</a></li>
												<li><a href="#">Technology</a></li>
											</ul>
											<h4 class="dropdown-heading">Travel</h4>
											<ul class="dropdown-list">
												<li><a href="#">Lifestyle</a></li>
												<li><a href="#">Healtth</a></li>
												<li><a href="#">Fashion</a></li>
											</ul>
										</div>
										<div class="col-md-3">
											<h4 class="dropdown-heading">Health</h4>
											<ul class="dropdown-list">
												<li><a href="#">Technology</a></li>
												<li><a href="#">Fashion</a></li>
												<li><a href="#">Health</a></li>
												<li><a href="#">Travel</a></li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</li>
						<li><a href="#">Technology</a></li>
						<li><a href="#">Health</a></li>
						<li><a href="#">Travel</a></li>
                         
						<script>
							var data = "{{.cat}}"
							var dataObj = JSON.parse(data)

							console.log(dataObj)
							for(i=0;i<dataObj.length;i++){
								document.write(`
								  <li><a href="/front/category?id=`+dataObj[i].id+`">`+dataObj[i].name+`</a></li>
								`)
							}

						</script>
					</ul>
					<!-- /nav -->
				</div>
			</div>
			<!-- /Main Nav -->

			<!-- Aside Nav -->
			<div id="nav-aside">
				<ul class="nav-aside-menu">
					<li><a href="/front">Home</a></li>
					<li class="has-dropdown"><a>Categories</a>
						<ul class="dropdown">
						    <script>
								var data = "{{.cat}}"
								var dataObj = JSON.parse(data)

								console.log(dataObj)
                                for(i=0;i<dataObj.length;i++){
									document.write(`
									  <li><a href="/front/category?id=`+dataObj[i].id+`">`+dataObj[i].name+`</a></li>
									`)
								}

							</script>
							<li><a href="#">Lifestyle</a></li>
							<li><a href="#">Fashion</a></li>
							<li><a href="#">Technology</a></li>
							<li><a href="#">Travel</a></li>
							<li><a href="#">Health</a></li>
						</ul>
					</li>
					<li><a href="/front/aboutus">About Us</a></li>
					<li><a href="/front/contacts">Contacts</a></li>
					<li><a href="#">Advertise</a></li>
				</ul>
				<button class="nav-close nav-aside-close"><span></span></button>
			</div>
			<!-- /Aside Nav -->
		</div>
		<!-- /NAV -->

		<!-- PAGE HEADER -->
		<div class="page-header">
			<div class="container">
				<div class="row">
					<div class="col-md-offset-1 col-md-10 text-center">
						<h1 class="text-uppercase">About Us</h1>
						<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
					</div>
				</div>
			</div>
		</div>
		<!-- /PAGE HEADER -->
	</header>
	<!-- /HEADER -->

	<!-- SECTION -->
	<div class="section">
		<!-- container -->
		<div class="container">
			<!-- row -->
			<div class="row">
				<div class="col-md-5">
					<div class="section-row">
						<div class="section-title">
							<h2 class="title">Our story</h2>
						</div>
						<p>Lorem ipsum dolor sit amet, mea ad idque detraxit, cu soleat graecis invenire eam. Vidisse suscipit liberavisse has ex, vocibus patrioque vim et, sed ex tation reprehendunt. Mollis volumus no vix, ut qui clita habemus, ipsum senserit est et. Ut has soluta epicurei mediocrem, nibh nostrum his cu, sea clita electram reformidans an.</p>
						<blockquote class="blockquote">
							<p>Ei prima graecis consulatu vix, per cu corpora qualisque voluptaria. Bonorum moderatius in per, ius cu albucius voluptatum. Ne ius torquatos dissentiunt. Brute illum utroque eu quo. Cu tota mediocritatem vis, aliquip cotidieque eu ius, cu lorem suscipit eleifend sit.</p>
							<footer class="blockquote-footer">John Doe</footer>
						</blockquote>
					</div>
				</div>
				<div class="col-md-7">
					<div class="section-row">
						<div class="section-title">
							<h2 class="title">Our Vision</h2>
						</div>
						<p>Est in saepe accusam luptatum. Purto deleniti philosophia eum ea, impetus copiosae id mel. Vis at ignota delenit democritum, te summo tamquam delicata pro. Utinam concludaturque et vim, mei ullum intellegam ei. Eam te illum nostrud, suas sonet corrumpit ea per. Ut sea regione posidonium. Pertinax gubergren ne qui, eos an harum mundi quaestio.</p>
						<p>Nihil persius id est, iisque tincidunt abhorreant no duo. Eripuit placerat mnesarchum ius at, ei pro laoreet invenire persecuti, per magna tibique scriptorem an. Aeque oportere incorrupte ius ea, utroque erroribus mel in, posse dolore nam in. Per veniam vulputate intellegam et, id usu case reprimique, ne aperiam scaevola sed. Veritus omnesque qui ad. In mei admodum maiorum iracundia, no omnis melius eum, ei erat vivendo his. In pri nonumes suscipit.</p>
					</div>
				</div>
			</div>
			<!-- /row -->
		</div>
		<!-- /container -->
	</div>
	<!-- /SECTION -->

	<!-- FOOTER -->
	<footer id="footer">
		<!-- container -->
		<div class="container">
			<!-- row -->
			<div class="row">
				<div class="col-md-3">
					<div class="footer-widget">
						<div class="footer-logo">
							<a href="/front" class="logo"><img src="/statics/front/img/logo-alt.png" alt=""></a>
						</div>
						<p>Nec feugiat nisl pretium fusce id velit ut tortor pretium. Nisl purus in mollis nunc sed. Nunc non blandit massa enim nec.</p>
						<ul class="contact-social">
							<li><a href="#" class="social-facebook"><i class="fa fa-facebook"></i></a></li>
							<li><a href="#" class="social-twitter"><i class="fa fa-twitter"></i></a></li>
							<li><a href="#" class="social-google-plus"><i class="fa fa-google-plus"></i></a></li>
							<li><a href="#" class="social-instagram"><i class="fa fa-instagram"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="col-md-3">
					<div class="footer-widget">
						<h3 class="footer-title">Categories</h3>
						<div class="category-widget">
							<ul>
								<li><a href="#">Lifestyle <span>451</span></a></li>
								<li><a href="#">Fashion <span>230</span></a></li>
								<li><a href="#">Technology <span>40</span></a></li>
								<li><a href="#">Travel <span>38</span></a></li>
								<li><a href="#">Health <span>24</span></a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-md-3">
					<div class="footer-widget">
						<h3 class="footer-title">Tags</h3>
						<div class="tags-widget">
							<ul>
								<li><a href="#">Social</a></li>
								<li><a href="#">Lifestyle</a></li>
								<li><a href="#">Blog</a></li>
								<li><a href="#">Travel</a></li>
								<li><a href="#">Technology</a></li>
								<li><a href="#">Fashion</a></li>
								<li><a href="#">Life</a></li>
								<li><a href="#">News</a></li>
								<li><a href="#">Magazine</a></li>
								<li><a href="#">Food</a></li>
								<li><a href="#">Health</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-md-3">
					<div class="footer-widget">
						<h3 class="footer-title">Newsletter</h3>
						<div class="newsletter-widget">
							<form>
								<p>Nec feugiat nisl pretium fusce id velit ut tortor pretium.</p>
								<input class="input" name="newsletter" placeholder="Enter Your Email">
								<button class="primary-button">Subscribe</button>
							</form>
						</div>
					</div>
				</div>
			</div>
			<!-- /row -->

			<!-- row -->
			<div class="footer-bottom row">
				<div class="col-md-6 col-md-push-6">
					<ul class="footer-nav">
						<li><a href="/front">Home</a></li>
						<li><a href="/front/aboutus">About Us</a></li>
						<li><a href="/front/contacts">Contacts</a></li>
						<li><a href="#">Advertise</a></li>
						<li><a href="#">Privacy</a></li>
					</ul>
				</div>
				<div class="col-md-6 col-md-pull-6">
					<div class="footer-copyright">
						<p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
					</div>
				</div>
			</div>
			<!-- /row -->
		</div>
		<!-- /container -->
	</footer>
	<!-- /FOOTER -->

	<!-- jQuery Plugins -->
	<script src="/statics/front/js/jquery.min.js"></script>
	<script src="/statics/front/js/bootstrap.min.js"></script>
	<script src="/statics/front/js/jquery.stellar.min.js"></script>
	<script src="/statics/front/js/main.js"></script>

</body>

</html>
